<template>
    <div class="contaienr">
        <div>
            <div class="header flex items-center">
                <el-card class="left">
                    <img src="../../../assets/image/dy/img4.png" class="icon-head" alt="" />
                    <div class="flex flex-jc-sb items-center mg-t-16">
                        <div class="name fs-14 bold">
                            {{ dyData.advertiseName }}
                        </div>
                        <div class="date fc-lightgray fs-12">
                            发布时间：{{ dyData.activityTime }}
                        </div>
                    </div>
                </el-card>
                <div class="right flex-1">
                    <div class="header bold">数据表现</div>
                    <div class="flex mg-t-40">
                        <div class="item flex-1">
                            <div class="title fc-lightgray">预约量(次)</div>
                            <div class="value mg-t-10 bold fs-24">
                                {{ dyData.applyCount ?? 0 }}
                            </div>
                            <img class="icon-chart" src="../../../assets/image/dashboard/line-1.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-card class="mg-t-20">
            <div class="fc202536 fs-16">销售数据</div>
            <tableComponent class="mg-t-20" :table-header="tableHeader" :table-data="tableData"
                v-model:page-info="pageInfo" @pageChange="handlePageChange">
                <template #productType>
                    <el-table-column label="意向功能">
                        <template #default="scope">
                            <span v-if="scope.row.productType == 0" class="orange">{{
                                '发薪'
                                }}</span>
                            <span v-else-if="scope.row.productType == 1" class="orange">{{
                                '投保'
                                }}</span>
                            <span v-else-if="scope.row.productType == 2" class="orange">{{
                                '电子签'
                                }}</span>
                            <span v-else class="orange">{{
                                '--'
                                }}</span>
                        </template>
                    </el-table-column>
                </template>
                <template #status>
                    <el-table-column label="跟进状态">
                        <template #default="scope">
                            <span v-if="scope.row.status == 0" class="orange">{{
                                '跟进中'
                                }}</span>
                            <span v-else-if="scope.row.status == 1" class="orange">{{
                                '已成交'
                                }}</span>
                            <span v-else class="orange">{{
                                '待跟进'
                                }}</span>
                        </template>
                    </el-table-column>
                </template>
            </tableComponent>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
    getDyData,
    getChartData,
    getSubscribeProductListApi
} from '@/api/baobai/dyData.ts'
import { queryAdvertiseList, queryChart } from '@/api/activity/index'
import tableComponent from '@/components/tableComponent/index.vue'
const dyData = ref({})
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const handlePageChange = () => {
    getSubscribeProductList()
}
const tableHeader = ref([
    {
        label: '企业名称',
        prop: 'companyName'
    },
    {
        label: '客户电话',
        prop: 'phone'
    },
    {
        label: '意向功能',
        prop: 'productType'
    },
    {
        label: '职位',
        prop: 'position'
    },
    {
        label: '申请时间',
        prop: 'createTime'
    },
    {
        label: '推送商务',
        prop: 'salesNames'
    },
    {
        label: '跟进商务',
        prop: 'salesName'
    },
    {
        label: '跟进状态',
        prop: 'status'
    }
])

const tableData = ref([])
const getData = () => {
    queryAdvertiseList({
        type: 3
    }).then((res) => {
        dyData.value = res?.length && res[0]
    })
}
const getSubscribeProductList = async () => {
    const res = await getSubscribeProductListApi({
        pageSize: pageInfo.value.pageSize,
        pageNum: pageInfo.value.pageNum
    })
    res.list.forEach((item: any) => {
        if (item.salesNames) {
            item.salesNames = item.salesNames.join(' | ')
        }
    })
    pageInfo.value.total = res.total
    tableData.value = res.list
}
onMounted(() => {
    getData()
    getSubscribeProductList()
})
</script>
<style lang="scss" scoped>
.contaienr {
    padding: 20px;
    box-sizing: border-box;
}

.left {
    width: 362px;
    height: 228px;
    border-radius: 8px;
    background: #fff;
    // padding: 16px 16px 44px;
}

.right {
    height: 228px;
    border-radius: 8px;
    background: #f7fbfe;
    margin-left: 16px;
    padding: 24px;
    box-sizing: border-box;
}

.icon-head {
    width: 100%;
    height: 168px;
    background: #fcc;
    display: block;
    border-radius: 8px;
}

.fc-lightgray {
    color: #6b6b86;
}

.item {
    text-align: center;
}

.mg-t-40 {
    margin-top: 40px;
}

.icon-chart {
    margin-top: 18px;
}

.fc202536 {
    color: #202536;
}
</style>
